<template>
  <div>
    <el-dialog
      title="修改密码"
      custom-class="changePWDialog"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      width="900px"
    >
      <div class="reminder">
        <i class="el-icon-warning"></i>
        您使用的是默认密码，为了账号安全，请修改当前密码。
      </div>
      <changePW
        :isDialog="isDialog"
        :isFindPW="isFindPW"
        :isShowUser="isShowUser"
        ref="changePW"
        @colseChangePwDialog="colseChangePwDialog"
        style="padding: 24px"
      ></changePW>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="commonBut saveBtn funComBut"
          @click="savaPW"
          >保存修改</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import changePW from '@/components/enterpriseSet/changePassword'

export default {
  name: 'changePasswordDialog',
  components: {
    changePW,
  },
  data() {
    return {
      dialogVisible: false,
      isDialog: true,
      isStrong: false,
      isFindPW: false,
      isShowUser: true,
    }
  },
  watch: {},
  created() {
    this.isStrong = localStorage.getItem('pwIsStrong')
    // alert(this.isStrong)

    this.isShowChangePwDialog()
  },
  mounted() {},
  methods: {
    savaPW() {
      this.$refs.changePW.submitPassForm()
    },
    colseChangePwDialog() {
      this.dialogVisible = false
    },
    isShowChangePwDialog() {
      if (this.isStrong !== 'false') {
        this.dialogVisible = false
      } else {
        this.dialogVisible = true
      }
    },
  },
  computed: {},
}
</script>

<style lang="less">
// 弹窗样式
.changePWDialog {
  .el-dialog__body {
    padding: 0;
  }
  .el-dialog__footer {
    padding: 7px 20px 7px;
  }
  // 页面提示
  .reminder {
    color: #666;
    font-size: 14px;
    background: #fffbe6;
    line-height: 36px;
    border-radius: 3px;
    padding: 0 24px;
    i {
      color: #ffaa00;
      margin-right: 4px;
      font-size: 20px;
      vertical-align: -2px;
    }
    .el-link {
      vertical-align: baseline;
    }
  }
}
</style>
